<template>
    <el-drawer :title="$t('game.setting.domain.drawer.details')" size="400px" :visible.sync="drawerVisible" @close="$emit('update:visible', false)">
        <vue-simplebar>
            <div class="pt-12 pb-12 pr-3 pl-5" v-if="data.id">
                <el-form label-width="auto" class="detail">
                    <el-form-item label="ID">{{ data.id }}</el-form-item>
                    <el-form-item :label="$t('game.setting.domain.name')">{{ data.name }}</el-form-item>
                    <el-form-item :label="$t('game.setting.domain.config.transferProxy')">
                        <div v-for="item in data.config.transferProxy">{{ item }}</div>
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.domain.config.cdnGateAddress')">
                        <div v-for="item in data.config.cdnGateAddress">{{ item }}</div>
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.domain.config.cdnClientDomain')">
                        <div v-for="item in data.config.cdnClientDomain">{{ item }}</div>
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.domain.config.cdnGameAddress.title')">
                        <div v-for="item in data.config.cdnGameAddress">{{ item.protocol }}://{{ item.domain }}:{{ item.port }}</div>
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.domain.created')">
                        <component-page-timestamp :timestamp="data.created"></component-page-timestamp>
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.domain.updated')">
                        <component-page-timestamp :timestamp="data.updated"></component-page-timestamp>
                    </el-form-item>
                </el-form>
            </div>
        </vue-simplebar>
    </el-drawer>
</template>

<script>
export default {
    name: "ItemDetails",
    props: ['visible', 'data'],
    data() {
        return {
            drawerVisible: false,
        }
    },
    watch: {
        visible: function (n, o) {
            if (n) {
                // 显示抽屉
                this.drawerVisible = n;
            }
        }
    },
}
</script>

<style scoped>
.el-form-item ::v-deep .el-form-item__label {
    min-width: 100px;
}
</style>
